<template>
    <div class="my-outbox">
        <div class="my-inbox" ref="box">
            <div class="my-list" v-for="(item,index) in sendVal" :key="index" ref="list">
                <router-link :to="{path:'/jsgg/dec',query:{type:1}}">
                    <span class="my-uname">{{item.biref}}</span>
                    <p>[{{item.createTime|formatDate}}]</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'my-marquee-left',
    props: {
        sendVal: Array
    },
    filters: {
        formatDate (value) {
			return value.slice(5,10)
        }
    },
    data() {
        return {
            // 定时器标识
            nowTime: null,
            // 每一个内容的宽度
            disArr: [],
            state: 1
        }
    },
    mounted() {
        // var that = this
        if (this.sendVal.length > 0) {
            this.$nextTick(function () {
                var item = this.$refs.list
                var len = this.sendVal.length
                var arr = []
                // 因为设置的margin值一样，所以取第一个就行。
                var margin = this.getMargin(item[0])
                for (var i = 0; i < len; i++) {
                    arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
                }
                this.disArr = arr
                this.moveLeft()
            })
        }

    },
    beforeDestroy() {
        // 页面关闭清除定时器
        clearInterval(this.nowTime)
        // 清除定时器标识
        this.nowTime = null
    },
    methods: {
        // 获取margin属性
        getMargin(obj) {
            var marg = window.getComputedStyle(obj, null)['margin-right']
            marg = marg.replace('px', '')
            return Number(marg) // 强制转化成数字
        },
        // 移动的方法
        moveLeft() {
            var that = this
            var outbox = this.$refs.box
            // 初始位置
            var startDis = 0
            this.nowTime = setInterval(function () {
                startDis -= 0.5
                if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
                    that.disArr.push(that.disArr.shift())
                    that.sendVal.push(that.sendVal.shift())
                    startDis = 0
                } else {
                    // console.log('不来不来就不来...')
                }
                outbox.style = `transform: translateX(${startDis}px)`
            }, 1000 / 60)
        }
    },
    watch: {
        sendVal(val) {
            if (this.state === 1) {
                this.$nextTick(function () {
                    var item = this.$refs.list
                    var len = this.sendVal.length
                    var arr = []
                    // 因为设置的margin值一样，所以取第一个就行。
                    var margin = this.getMargin(item[0])
                    for (var i = 0; i < len; i++) {
                        arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
                    }
                    this.disArr = arr
                    this.moveLeft()
                })
                this.state++
            }

        }
    }
}
</script>

<style  scoped>
.my-outbox {
    /*color: #D7BC8D;*/
    overflow: hidden;
    color: #333;
    height: 35px;
    /*background: #422b02;*/
}
.my-inbox {
    white-space: nowrap;
}
.my-list {
    margin-right: 25px;
    display: inline-block;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
}
.my-list a {
    display: flex;
}
.my-list a p {
    margin-left: 8px;
    color: #999;
}
.my-uname {
    /*color: #FF8900;*/
    color: #333;
}
</style>